<template>
    <div class="common-layout">
        <el-container style="height: 100vh;">
            <el-header
                style="background-color: #000000;color: aliceblue;font-size: 22px;padding: 15px;height: 60px;line-height: 30px;">
                <el-icon>
                    <Grid />
                </el-icon>成都爱吃兔食加工有限公司
                <span><el-button style="float: right;" type="danger" @click=""><el-icon>
                            <SwitchButton />
                        </el-icon>退出</el-button></span>
            </el-header>
            <el-container style="height: calc(100vh - 60px);">
                <el-aside width="200px" style="height: 100%;overflow-y: auto;">
                    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                        default-active="2" text-color="#fff" router style="height: 100%;border-right: none;">
                        <el-sub-menu index="1" style="background-color:ghostwhite;">
                            <template #title>
                                <span style="color: #000000;font-size: 18px;">企业管理<span style="font-size: 14px;">
                                        2021-07</span></span>
                            </template>
                            <el-menu-item index="/Show">溯源管理</el-menu-item>
                            <el-menu-item index="/breeding">溯源管理-溯源详情-养殖信息</el-menu-item>
                            <el-menu-item index="/slaughter">溯源管理-溯源详情-屠宰信息</el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </el-aside>
                <el-main style="height: 100%;overflow-y: auto;padding: 20px;">
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { Grid, SwitchButton } from '@element-plus/icons-vue'

const router = useRouter()

const navigateToTraceability = () => {
    router.push('/')
}
</script>

<style scoped>
.common-layout {
    height: 100vh;
    width: 100vw;
}

.el-container {
    height: 100%;
}

.el-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.el-aside {
    background-color: #545c64;
    border-right: 1px solid #e0e0e0;
}

.el-menu {
    height: 100%;
    border-right: none;
}

.el-menu-vertical-demo {
    height: 100%;
}

.el-main {
    background-color: #f5f5f5;
    padding: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .el-aside {
        width: 180px !important;
    }
}

@media (max-width: 480px) {
    .el-aside {
        width: 160px !important;
    }

    .el-header {
        font-size: 18px !important;
        padding: 10px !important;
    }
}
</style>
